﻿
@{
    ViewBag.Title = "Props";
}
<style type="text/css">
    table tr td{
        border:solid 1px #000000;
    }
</style>
<h2>Props</h2>
<div id="app">
    <table>
        <tr>
            <th colspan="3">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{ name }}</td>
            <td><input type="text" v-model="name" /></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
    </table>
    <my-component v-bind:myname.once="name" :myage.sync="age"></my-component>
</div>
<template id="mycomponent">
    <table>
        <tr>
            <th colspan="3">子组件数据</td>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myname }}</td>
            <td><input type="text" v-model="myname" /></td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myage }}</td>
            <td><input type="text" v-model="myage" /></td>
        </tr>
    </table>
</template>

@section footscripts{
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'keepfool',
                age: 28
            },
            components: {
                'my-component': {
                    template: '#mycomponent',
                    props:['myname','myage']
                }
            }
        });

    </script>    
}

